Interactive Legend এবং Data Series Toggle Option গাইড ও নোট

Highcharts এ Interactive Legend এবং Data Series Toggle Option ব্যবহারকারীদের চার্টের সাথে আরও ইন্টারঅ্যাকটিভভাবে কাজ করার সুযোগ দেয়। এগুলোর মাধ্যমে ব্যবহারকারী সহজেই চার্টের সিরিজগুলোর প্রদর্শন বা অদৃশ্য করতে পারেন, যার ফলে ডেটা বিশ্লেষণ এবং কাস্টমাইজেশন আরও সহজ হয়।

Interactive Legend কাস্টমাইজ করা

Interactive Legend এর মাধ্যমে ব্যবহারকারী চার্টের সিরিজগুলোর ওপর ক্লিক করে তা দেখতে বা লুকাতে পারেন। Highcharts এ এই ফিচারটি ডিফল্টভাবেই সক্রিয় থাকে, এবং আপনি এটিকে আরও কাস্টমাইজ করতে পারেন, যেমন লেবেলের অবস্থান, সিরিজের রঙ, বা সিরিজের উপস্থিতি কন্ট্রোল করা।

Interactive Legend এর মৌলিক কনফিগারেশন

Highcharts.chart('container', {
    chart: {
        type: 'line'
    },
    title: {
        text: 'Interactive Legend Example'
    },
    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May']
    },
    yAxis: {
        title: {
            text: 'Value'
        }
    },
    legend: {
        enabled: true,  // Legend সক্রিয় করা
        align: 'right',  // Legend এর অবস্থান ডান দিকে
        verticalAlign: 'middle',  // Legend এর অবস্থান মাঝখানে
        layout: 'vertical'  // Legend এর লেআউট
    },
    series: [{
        name: 'Product A',
        data: [10, 20, 30, 40, 50]
    }, {
        name: 'Product B',
        data: [5, 10, 15, 20, 25]
    }]
});

এখানে:

• legend.enabled: Legend কনট্রোল করা হয়, যদি true থাকে তবে Legend প্রদর্শিত হবে।
• legend.align: Legend এর অবস্থান কাস্টমাইজ করা হয় (ডান, বাম, বা কেন্দ্র)।
• legend.layout: Legend এর লেআউট (অনুভূমিক বা উল্লম্ব) নির্ধারণ করা হয়।

Interactive Legend এর সাথে Data Series Toggle

Highcharts এ interactive legend ব্যবহারের মাধ্যমে ব্যবহারকারী সিরিজ লুকাতে বা প্রদর্শন করতে পারেন। এটি legend এর মাধ্যমে পরিচালিত হয়। উদাহরণস্বরূপ, একটি সিরিজের ওপর ক্লিক করলে, সেই সিরিজটি চার্ট থেকে অদৃশ্য হয়ে যাবে এবং পুনরায় ক্লিক করলে তা ফিরে আসবে।

Data Series Toggle Option কাস্টমাইজ করা

Data Series Toggle বা সিরিজের প্রদর্শন বা লুকানোর কনফিগারেশন ব্যবহারকারীদের চার্টের সিরিজগুলোর উপর সহজেই ইন্টারঅ্যাক্ট করতে দেয়। এটি legend এর মাধ্যমে সরাসরি কন্ট্রোল করা যায়, যেখানে প্রতিটি সিরিজের পাশে একটি চেকবক্স থাকে, যা সিরিজকে show বা hide করে।

Data Series Toggle এর কনফিগারেশন

Highcharts.chart('container', {
    chart: {
        type: 'line'
    },
    title: {
        text: 'Data Series Toggle Example'
    },
    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May']
    },
    yAxis: {
        title: {
            text: 'Value'
        }
    },
    legend: {
        enabled: true,  // Legend সক্রিয় করা
        layout: 'vertical',  // Legend এর লেআউট
        align: 'right',  // Legend এর অবস্থান
        verticalAlign: 'middle'  // Legend এর অবস্থান
    },
    series: [{
        name: 'Product A',
        data: [10, 20, 30, 40, 50],
        visible: true  // সিরিজটি ডিফল্টভাবে দৃশ্যমান থাকবে
    }, {
        name: 'Product B',
        data: [5, 10, 15, 20, 25],
        visible: false  // সিরিজটি ডিফল্টভাবে অদৃশ্য থাকবে
    }]
});

এখানে:

• series.visible: এই অপশনটি ব্যবহার করে সিরিজের প্রাথমিক দৃশ্যমানতা কনফিগার করা হয়। যদি এটি false হয়, তাহলে সিরিজটি শুরুতে লুকানো থাকবে, এবং true হলে তা প্রদর্শিত হবে।

Data Series Toggle এর সাথে Click Event

আপনি click event ব্যবহার করে আরও কাস্টমাইজড আচরণও যোগ করতে পারেন। উদাহরণস্বরূপ, আপনি চাচ্ছেন যে যখন কোনও সিরিজের ওপর ক্লিক করা হবে, তখন তা toggle হবে, অর্থাৎ দৃশ্যমান থাকবে বা লুকাবে।

Highcharts.chart('container', {
    chart: {
        type: 'line'
    },
    title: {
        text: 'Data Series Toggle with Click Event'
    },
    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May']
    },
    yAxis: {
        title: {
            text: 'Value'
        }
    },
    legend: {
        enabled: true,  // Legend সক্রিয় করা
        layout: 'vertical',
        align: 'right',
        verticalAlign: 'middle'
    },
    series: [{
        name: 'Product A',
        data: [10, 20, 30, 40, 50],
        visible: true
    }, {
        name: 'Product B',
        data: [5, 10, 15, 20, 25],
        visible: true
    }],
    plotOptions: {
        series: {
            events: {
                legendItemClick: function () {
                    var series = this;
                    // সিরিজটি ক্লিক করলে তা toggle হবে
                    series.setVisible(!series.visible);
                    return false;  // ক্লিকের ডিফল্ট আচরণ বন্ধ
                }
            }
        }
    }
});

এখানে:

• legendItemClick ইভেন্টটি ব্যবহারকারীর ক্লিকের প্রতিক্রিয়া হিসেবেই সিরিজের দৃশ্যমানতা toggle করে।

উপসংহার

Highcharts এ Interactive Legend এবং Data Series Toggle Option ব্যবহারের মাধ্যমে ব্যবহারকারীকে চার্টের সিরিজগুলো কাস্টমাইজ এবং পরিচালনা করার সুবিধা দেওয়া হয়। এগুলোর মাধ্যমে ব্যবহারকারীরা সহজেই সিরিজগুলি দেখাতে বা লুকাতে পারেন, যা ডেটা বিশ্লেষণকে আরও কার্যকর করে তোলে। আপনি কাস্টম কনফিগারেশন এবং legendItemClick ইভেন্ট ব্যবহার করে এই বৈশিষ্ট্যগুলির কার্যকারিতা আরও উন্নত করতে পারেন।